<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Checkbox 复选框"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="基础用法">
      <hips-uploader
        v-model="uploadFiles0"
        :mime-types="mimeTypes"
        :add-image="addImage"
        :multi-choose-img="multiChooseImg"
        @over-max-length="handleOverLength"
        @over-max-size="handleOverSize"
        @over-dimensions="handleOverDimensions"
        @delete-file="handleDeleteFile"
      />
      <hips-row
        gutter="20"
        type="flex"
        justify="center"
        style="margin-top:20px;"
      >
        <hips-col span="8">
          <hips-button
            type="primary"
            block
            @click="customDelete"
          >
            选择
          </hips-button>
        </hips-col>

        <hips-col span="8">
          <hips-button
            type="primary"
            block
            @click="multiChooseImg = false"
          >
            取消
          </hips-button>
        </hips-col>
      </hips-row>
    </demo-block>

    <demo-block title="选择后自动上传至服务器">
      <hips-uploader
        v-model="uploadFiles1"
        :mime-types="mimeTypes"
        :upload-config="uploadConfig()"
        multiple
        @over-max-length="handleOverLength"
        @over-max-size="handleOverSize"
        @over-dimensions="handleOverDimensions"
        @auto-upload-result="handleAutoUploadResult"
      />
    </demo-block>

    <demo-block title="文件最大 10000 ">
      <hips-uploader
        v-model="uploadFiles2"
        :mime-types="mimeTypes"
        max-size="10000"
        multiple
        @over-max-length="handleOverLength"
        @over-max-size="handleOverSize"
        @over-dimensions="handleOverDimensions"
      />
    </demo-block>

    <demo-block title="文件最多 2">
      <hips-uploader
        v-model="uploadFiles3"
        :mime-types="mimeTypes"
        max-length="2"
        multiple
        @over-max-length="handleOverLength"
        @over-max-size="handleOverSize"
        @over-dimensions="handleOverDimensions"
      />
    </demo-block>

    <demo-block title="规格固定为 120*120">
      <hips-uploader
        v-model="uploadFiles4"
        :mime-types="mimeTypes"
        :dimensions="{ width: 120, height: 120 }"
        multiple
        @over-max-length="handleOverLength"
        @over-max-size="handleOverSize"
        @over-dimensions="handleOverDimensions"
      />
    </demo-block>

    <demo-block title="禁用">
      <hips-uploader
        v-model="uploadFiles5"
        :mime-types="mimeTypes"
        disabled
        @over-max-length="handleOverLength"
        @over-max-size="handleOverSize"
        @over-dimensions="handleOverDimensions"
      />
    </demo-block>

    <demo-block title="列表模式">
      <hips-uploader
        v-model="uploadFiles6"
        :mime-types="mimeTypes"
        :multi-choose-img="multiChooseImg1"
        :upload-config="uploadConfig()"
        view-type="list"
        multiple
        @over-max-length="handleOverLength"
        @over-max-size="handleOverSize"
        @over-dimensions="handleOverDimensions"
      />
      <hips-row
        gutter="20"
        type="flex"
        justify="center"
        style="margin-top:20px;"
      >
        <hips-col span="8">
          <hips-button
            type="primary"
            block
            @click="customDelete1"
          >
            选择
          </hips-button>
        </hips-col>

        <hips-col span="8">
          <hips-button
            type="primary"
            block
            @click="multiChooseImg1 = false"
          >
            取消
          </hips-button>
        </hips-col>
      </hips-row>
    </demo-block>

    <demo-block title="上传压缩">
      <hips-uploader
        v-model="beforeCompress"
        :mime-types="mimeTypes"
      />
      <hips-uploader
        v-model="compressFile"
        :compress-config="compressConfig"
        :mime-types="mimeTypes"
      />
      <hips-button
        style="margin-left: 50%;transform: translateX(-50%);margin-top:10px;"
        type="primary"
        @click="compare"
      >
        上传比较
      </hips-button>
    </demo-block>
  </hips-view>
</template>

<script>
import addImage from '@/assets/upload-image.png';
import BasicView from '@/mixin/basic-view';
import { Uploader, Button, Row, Col } from '@hips/vue-ui';

export default {
  components: {
    [Uploader.name]: Uploader,
    [Button.name]: Button,
    [Row.name]: Row,
    [Col.name]: Col,
  },
  mixins: [ BasicView ],
  data() {
    return {
      uploadFiles0: [],
      uploadFiles1: [],
      uploadFiles2: [],
      uploadFiles3: [],
      uploadFiles4: [],
      uploadFiles5: [],
      uploadFiles6: [],
      mimeTypes: [ 'image/png', 'image/jpeg' ],
      fileDimensions: {
        width: 512,
        height: 512,
      },
      addImage,
      multiChooseImg: false,
      multiChooseImg1: false,
      compressConfig: {
        width: 1600,
        height: 1600,
        quality: 0.5,
      },
      beforeCompress: [],
      compressFile: [],
    };
  },
  methods: {
    customUpload() {
      if (this.uploadFiles0.length > 0) {
        this.$hips.toast(
          `customUpload file length = ${this.uploadFiles0.length}`,
        );
      }
    },
    customDelete() {
      this.multiChooseImg = true;
    },
    customDelete1() {
      this.multiChooseImg1 = true;
    },
    handleOverLength() {
      this.$hips.toast('over length handle');
    },
    handleOverSize() {
      this.$hips.toast('over size handle');
    },

    handleOverDimensions() {
      this.$hips.toast('over dimensions handle');
    },

    handleAutoUploadResult(res) {
      this.$hips.toast(JSON.stringify(res));
    },

    handleDeleteFile(data) {
      console.log('file = ', data.file);
      this.$hips.toast(`delete file at index = ${data.index}`);
    },

    compare() {
      console.log(this.beforeCompress, this.compressFile);
    },

    uploadConfig() {
      let temp = {
        action: 'http://wechat.hand-china.com/hmapshowcase220/api/iconUpload',
        headers: {
          Authorization: 'bearer ea262d63-3b7d-433b-b64c-1b475fcbeac4',
          ContentType: 'multipart/form-data',
        },
        formData: new FormData(),
        methods: 'post',
        fileKey: 'file',
      };
      return temp;
    },
  },
};
</script>
